<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">
    <ui:define name="content">
        <div class="ui-g ui-fluid">
            <div class="ui-g-12 ui-lg-6">
                <!-- Left Side -->
                <div class="card card-w-title">
                    <h1>InputText</h1>
                    <p:panelGrid columns="3" layout="grid" styleClass="ui-panelgrid-blank form-group">
                        <h:panelGroup class="md-inputfield">
                            <p:inputText/>
                            <label>Name</label>
                        </h:panelGroup>
                        <h:panelGroup class="md-inputfield">
                            <p:inputText/>
                            <label>Email</label>
                        </h:panelGroup>
                        <h:panelGroup class="md-inputfield">
                            <p:inputText/>
                            <label>Phone</label>
                        </h:panelGroup>

                        <p:inputText placeholder="Disabled Input" disabled="true"/>
                        <h:panelGroup class="md-inputfield">
                            <p:inputText/>
                            <label>Address</label>
                        </h:panelGroup>
                        <p:inputText/>
                    </p:panelGrid>
                </div>

                <div class="card card-w-title">
                    <h1>TextArea</h1>
                    <p:inputTextarea placeholder="Your Message" cols="20" rows="3"/>
                </div>

                <div class="card card-w-title">
                    <h1>AutoComplete</h1>
                    <p:panelGrid layout="grid" columns="1" styleClass="form-group ui-panelgrid-blank">
                        <p:outputLabel value="Simple:" for="acSimple" />
                        <p:autoComplete id="acSimple" value="#{autoCompleteView.txt1}" completeMethod="#{autoCompleteView.completeText}" style="margin-bottom:10px;"/>

                        <p:outputLabel value="DropDown:" for="dd" />
                        <p:autoComplete id="dd" dropdown="true" value="#{autoCompleteView.txt6}" completeMethod="#{autoCompleteView.completeText}" style="margin-bottom:10px;"/>

                        <p:outputLabel value="Group:" for="group" />
                        <p:autoComplete id="group"
                                        value="#{autoCompleteView.theme4}"
                                        completeMethod="#{autoCompleteView.completeThemeContains}"
                                        var="theme"
                                        itemLabel="#{theme.displayName}"
                                        itemValue="#{theme}"
                                        converter="themeConverter"
                                        groupBy="#{autoCompleteView.getThemeGroup(theme)}"
                                        scrollHeight="250"/>
                    </p:panelGrid>
                </div>

                <div class="card card-w-title">
                    <h1>SelectCheckBoxMenu</h1>
                    <p:selectCheckboxMenu value="#{checkboxView.selectedCities}"
                                          label="Cities"
                                          filter="true"
                                          filterMatchMode="startsWith">
                        <f:selectItem itemLabel="Option 1" itemValue="1" />
                        <f:selectItem itemLabel="Option 2" itemValue="2" />
                        <f:selectItem itemLabel="Option 3" itemValue="3" />
                    </p:selectCheckboxMenu>
                </div>

                <div class="card card-w-title">
                    <h1>SelectManyMenu</h1>
                    <p:selectManyMenu value="#{selectManyView.selectedOptions}" showCheckbox="true" style="width:200px;">
                        <f:selectItem itemLabel="Option 1" itemValue="1" />
                        <f:selectItem itemLabel="Option 2" itemValue="2" />
                        <f:selectItem itemLabel="Option 3" itemValue="3" />
                    </p:selectManyMenu>
                </div>

                <div class="card card-w-title">
                    <h1>Rating</h1>
                    <h:panelGrid columns="2" cellpadding="5">
                        <h:outputText value="Basic:" />
                        <p:rating value="#{ratingView.rating1}" />

                        <h:outputText value="Callback:" />
                        <p:rating value="#{ratingView.rating2}" stars="5" cancel="false" onRate="alert('You rated ' + value)" />

                        <h:outputText value="Disabled"/>
                        <p:rating value="#{ratingView.rating4}" disabled="true" />
                    </h:panelGrid>
                </div>

                <div class="card card-w-title">
                    <h1>Calendar</h1>
                    <p:calendar id="inline" value="#{calendarView.date1}" mode="inline" locale="zh_CN" pattern="yyyy-MM-dd"/>

                    <p:panelGrid columns="1" layout="grid" styleClass="ui-panelgrid-blank grid-pad" style="margin-top:10px">
                        <p:outputLabel for="popup" value="Popup:"/>
                        <p:calendar id="popup" value="#{calendarView.date2}" locale="en_US" pattern="MM/dd/yyyy"/>

                        <p:outputLabel for="multi" value="Multiple:"/>
                        <p:calendar id="multi" value="#{calendarView.date7}" pages="3" locale="en_US" pattern="MM/dd/yyyy"/>

                        <p:outputLabel for="effect" value="Effect:"/>
                        <p:calendar id="effect" value="#{calendarView.date8}" effect="fold" locale="en_US" pattern="MM/dd/yyyy"/>

                        <p:outputLabel for="datetime" value="Datetime:"/>
                        <p:calendar id="datetime" value="#{calendarView.date10}" locale="en_US" pattern="MM/dd/yyyy HH:mm:ss"/>

                        <p:outputLabel for="time" value="Time:"/>
                        <p:calendar id="time" value="#{calendarView.date11}" locale="en_US" pattern="HH:mm a" timeOnly="true"/>

                        <p:outputLabel for="button" value="Button:"/>
                        <p:calendar id="button" value="#{calendarView.date3}" locale="en_US" pattern="MM/dd/yyyy" showOn="button"/>
                    </p:panelGrid>
                </div>
            </div>

            <div class="ui-g-12 ui-lg-6">
                <!-- Right Side -->
                <div class="card card-w-title">
                    <h1>Checkboxes</h1>
                    <p:selectManyCheckbox value="#{checkboxView.selectedConsoles}" layout="responsive" columns="3">
                        <f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
                        <f:selectItem itemLabel="PS4" itemValue="PS+" />
                        <f:selectItem itemLabel="Wii U" itemValue="Wii U" />
                    </p:selectManyCheckbox>
                </div>

                <div class="card card-w-title">
                    <h1>RadioButtons</h1>
                    <p:selectOneRadio value="#{radioView.console}" layout="responsive" columns="3">
                        <f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
                        <f:selectItem itemLabel="PS4" itemValue="PS+" />
                        <f:selectItem itemLabel="Wii U" itemValue="Wii U" />
                    </p:selectOneRadio>
                </div>

                <div class="card card-w-title">
                    <h1>Input Switch</h1>
                    <p:inputSwitch value="#{selectBooleanView.value1}" offLabel="off" onLabel="on" />
                </div>

                <div class="card card-w-title">
                    <h1>SelectOneMenu</h1>
                    <p:panelGrid layout="grid" columns="1" styleClass="form-group ui-panelgrid-blank" style="margin-bottom:10px">
                        <p:selectOneMenu id="console" value="#{selectOneMenuView.console}" style="margin-bottom:10px;">
                            <f:selectItem itemLabel="Select One" itemValue="" />
                            <f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
                            <f:selectItem itemLabel="PS4" itemValue="PS4" />
                            <f:selectItem itemLabel="Wii U" itemValue="Wii U" />
                        </p:selectOneMenu>

                        <p:selectOneMenu id="car" value="#{selectOneMenuView.car}" style="margin-bottom:10px;">
                            <f:selectItem itemLabel="Select One" itemValue="" />
                            <f:selectItems value="#{selectOneMenuView.cars}" />
                        </p:selectOneMenu>

                        <p:selectOneMenu id="city" value="#{selectOneMenuView.city}" effect="fold" editable="true">
                            <f:selectItem itemLabel="Select One" itemValue="" />
                            <f:selectItems value="#{selectOneMenuView.cities}" />
                        </p:selectOneMenu>
                    </p:panelGrid>
                </div>

                <div class="card card-w-title">
                    <h1>Keyboard And Password</h1>
                    <p:panelGrid columns="1" layout="grid" styleClass="form-group ui-panelgrid-blank" style="margin-bottom:10px">
                        <p:keyboard value="#{keyboardView.value1}" placeholder="Keyboard" showMode="focus"/>
                        <p:password value="#{passwordView.password4}"
                                    placeholder="Password"
                                    feedback="true"
                                    inline="true"
                                    promptLabel="Please enter a password"
                                    weakLabel="Weak"
                                    goodLabel="Good"
                                    strongLabel="Strong"
                                    style="margin-top:15px;"/>
                    </p:panelGrid>
                </div>

                <div class="card card-w-title">
                    <h1>MultiSelectListBox</h1>
                    <p:multiSelectListbox value="#{multiSelectView.selection}" effect="slide" header="Categories" showHeaders="true">
                        <f:selectItems value="#{multiSelectView.categories}" />
                    </p:multiSelectListbox>
                </div>

                <div class="card card-w-title">
                    <h1>SelectOneListBox</h1>
                    <p:selectOneListbox value="#{selectOneView.option}">
                        <f:selectItem itemLabel="Option 1" itemValue="1" />
                        <f:selectItem itemLabel="Option 2" itemValue="2" />
                        <f:selectItem itemLabel="Option 3" itemValue="3" />
                    </p:selectOneListbox>
                </div>

                <div class="card card-w-title">
                    <h1>Spinner</h1>
                    <p:spinner value="#{spinnerView.number1}" />
                </div>

                <div class="card card-w-title">
                    <h1>Slider</h1>
                    <p:panelGrid columns="1" layout="grid" styleClass="form-group ui-panelgrid-blank" style="margin-bottom: 50px">
                        <p:inputText id="slider" value="#{sliderView.number1}" placeholder="Horizontal" style="margin-bottom:10px;"/>
                        <p:slider for="slider" />
                    </p:panelGrid>

                    <p:panelGrid columns="1" layout="grid" styleClass="form-group ui-panelgrid-blank" style="margin-bottom: 50px">
                        <p:inputText id="txt4" value="#{sliderView.number4}" placeholder="Vertical" style="margin-bottom:10px;"/>
                        <p:slider for="txt4" type="vertical" />
                    </p:panelGrid>

                    <p:panelGrid columns="1" layout="grid" styleClass="form-group ui-panelgrid-blank">
                        <h:outputText id="displayRange" value="Values" style="font-size:16px"/>
                        <p:slider for="txt6,txt7" display="displayRange" range="true" displayTemplate="Between {min} and {max}" style="margin-top:15px"/>
                    </p:panelGrid>
                    <h:inputHidden id="txt6" value="#{sliderView.number6}" />
                    <h:inputHidden id="txt7" value="#{sliderView.number7}" />
                </div>
            </div>
            <div class="ui-g-12 ui-g-nopad">
                <div class="ui-g-12 ui-lg-6" style="padding-top:0">
                    <div class="card card-w-title">
                        <h1>Buttons</h1>
                        <h:form>
                            <p:panelGrid columns="1" layout="grid" styleClass="ui-panelgrid-blank lesspad">
                                <h:outputText value="SelectBooleanButton:"/>
                                <p:selectBooleanButton value="#{selectBooleanView.value1}" onLabel="Yes" offLabel="No" style="width:50%"/>

                                <h:outputText value="SelectOneButton:"/>
                                <p:selectOneButton value="#{selectOneView.option}">
                                    <f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
                                    <f:selectItem itemLabel="PS4" itemValue="PS4" />
                                    <f:selectItem itemLabel="Wii U" itemValue="Wii U" />
                                </p:selectOneButton>

                                <h:outputText value="SelectManyButton:"/>
                                <p:selectManyButton value="#{selectManyView.selectedOptions}">
                                    <f:selectItem itemLabel="b" itemValue="b" />
                                    <f:selectItem itemLabel="u" itemValue="u" />
                                    <f:selectItem itemLabel="i" itemValue="i" />
                                </p:selectManyButton>

                                <h:outputText value="Button"/>
                                <p:button value="Bookmark" icon="ui-icon-star" style="width:auto"/>

                                <h:outputText value="Button Icon Only"/>
                                <p:commandButton icon="ui-icon-add" type="button"/>

                                <h:outputText value="CommandButton"/>
                                <p:commandButton value="With Icon" icon="ui-icon-clear" type="button"/>

                                <h:outputText value="CommandButton"/>
                                <p:commandButton value="With Icon (Right Side)" icon="ui-icon-send" iconPos="right" style="width:auto" type="button"/>

                                <h:outputText value="CommandLink"/>
                                <p:commandLink id="ajax" actionListener="#{buttonView.buttonAction}">
                                    <h:outputText value="commandLink" />
                                </p:commandLink>

                                <h:outputText value="Link" />
                                <p:link value="Bookmark"/>

                                <h:outputText value="SplitButton"/>
                                <p:splitButton value="Save" actionListener="#{buttonView.save}" icon="ui-icon-check">
                                    <p:menuitem value="Update" actionListener="#{buttonView.update}" icon="ui-icon-cloud-upload" />
                                    <p:menuitem value="Queue" actionListener="#{buttonView.delete}" ajax="false" icon="ui-icon-cloud-queue" />
                                    <p:separator />
                                    <p:menuitem value="Homepage" url="#" icon="ui-icon-home" />
                                </p:splitButton>
                            </p:panelGrid>
                        </h:form>
                    </div>
                </div>

                <div class="ui-g-12 ui-lg-6" style="padding-top:0">
                    <div class="card card-w-title">
                        <h1>Colored Buttons</h1>
                        <p>Raised and Flat buttons with various color alternatives.</p>
                        <div class="ui-g">
                            <div class="ui-g-12 ui-md-6" style="text-align:center">
                                <p:commandButton type="button" value="Primary Button" style="margin-bottom:10px;"/>
                                <p:commandButton type="button" value="Secondary Button" styleClass="secondary" style="margin-bottom:10px;"/>
                                <p:commandButton type="button" value="Inline Button" style="width:auto;margin-bottom:10px;"/>
                                <p:commandButton type="button" value="Blue-Grey Button" styleClass="blue-grey-btn" style="margin-bottom:10px;"/>
                                <p:commandButton type="button" value="Cyan Button" styleClass="cyan-btn" style="margin-bottom:10px;"/>
                                <p:commandButton type="button" value="Amber Button" styleClass="amber-btn" style="margin-bottom:10px;"/>
                                <p:commandButton type="button" value="Teal Button" styleClass="teal-btn" style="margin-bottom:10px;"/>
                                <p:commandButton type="button" value="Red Button" styleClass="red-btn" style="margin-bottom:10px;"/>
                                <p:commandButton type="button" value="Orange Button" styleClass="orange-btn" style="margin-bottom:10px;"/>
                                <p:commandButton type="button" value="Green Button" styleClass="green-btn" style="margin-bottom:10px;"/>
                                <p:commandButton type="button" value="Deep-Orange Button" styleClass="deep-orange-btn" style="margin-bottom:10px;"/>
                                <p:commandButton type="button" value="Purple Button" styleClass="purple-btn" style="margin-bottom:10px;"/>
                                <p:commandButton type="button" value="Indigo Button" styleClass="indigo-btn" style="margin-bottom:10px;"/>
                                <p:commandButton type="button" value="Pink Button" styleClass="pink-btn" style="margin-bottom:10px;"/>
                                <p:commandButton type="button" value="Brown Button" styleClass="brown-btn" style="margin-bottom:10px;"/>
                            </div>

                            <div class="ui-g-12 ui-md-6" style="text-align:center">
                                <p:commandButton type="button" value="Primary Button" styleClass="flat" style="margin-bottom:10px;"/>
                                <p:commandButton type="button" value="Secondary Button" styleClass="secondary flat" style="margin-bottom:10px;"/>
                                <p:commandButton type="button" value="Inline Button" styleClass="flat" style="width:auto;margin-bottom:10px;"/>
                                <p:commandButton type="button" value="Blue-Grey Button" styleClass="blue-grey-btn flat" style="margin-bottom:10px;"/>
                                <p:commandButton type="button" value="Cyan Button" styleClass="cyan-btn flat" style="margin-bottom:10px;"/>
                                <p:commandButton type="button" value="Amber Button" styleClass="amber-btn flat" style="margin-bottom:10px;"/>
                                <p:commandButton type="button" value="Teal Button" styleClass="teal-btn flat" style="margin-bottom:10px;"/>
                                <p:commandButton type="button" value="Red Button" styleClass="red-btn flat" style="margin-bottom:10px;"/>
                                <p:commandButton type="button" value="Orange Button" styleClass="orange-btn flat" style="margin-bottom:10px;"/>
                                <p:commandButton type="button" value="Green Button" styleClass="green-btn flat" style="margin-bottom:10px;"/>
                                <p:commandButton type="button" value="Deep-Orange Button" styleClass="deep-orange-btn flat" style="margin-bottom:10px;"/>
                                <p:commandButton type="button" value="Purple Button" styleClass="purple-btn flat" style="margin-bottom:10px;"/>
                                <p:commandButton type="button" value="Indigo Button" styleClass="indigo-btn flat" style="margin-bottom:10px;"/>
                                <p:commandButton type="button" value="Pink Button" styleClass="pink-btn flat" style="margin-bottom:10px;"/>
                                <p:commandButton type="button" value="Brown Button" styleClass="brown-btn flat" style="margin-bottom:10px;"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </ui:define>
</ui:composition>